<template>
  <div id="app">
    <!-- form -->
    <div class="box">
      <div width="35%" style="color: #606266;">
        <div style="text-align: center; font-size: 20px; font-weight: 1000;">
          保密声明
        </div>
        <pre style="margin-left: -10px;">

根据《中华人民共和国反不正当竞争法》法律、法规规定，鉴于本人受聘于公司，
本人在职期间有从公司获得公司经营策略秘密和客户资料秘密的机会，有获得及
增进知识、经验、技能的机会；公司给本人的劳动支付了工资、奖金、提成、奖
励等报酬；本人明白泄露公司经营策略秘密、客户资料秘密会对公司造成极大损
害。为保护公司的经营策略秘密、客户资料秘密，维护公司及本人共同的长远利
益，本人自愿声明如下：
<p style="color:red;"><strong>公司作为与阿里巴巴合作的渠道商，以下保密内容及义务，统统包括与
阿里巴巴相关的需要保密的策略、信息、方案、数据等机密。</strong></p>
<b>一、保密内容</b>
1.公司尚未公开的发展规划、方针政策、经营决策的信息、计划、方案；
2.公司的经营方法、状况和经营实力；
3.公司机构的设置、编制、人员名册和统计表、奖惩材料、考核材料；
4.公司各级员工的个人薪金收入情况；
5.公司具有保密级别的文件、资料、会议记录、信件、方案、图片；
6.公司客户的资料及财产；

<b>二、保密义务</b>
1.本人必须严格遵守公司规定的任何成文或者不成文的保密文件、规章、制度等，
不得以任何形式将公司的任何机密泄露给公司以外的任何其他人。知悉公司机密
泄露情况者，应及时向公司人事部负责人报告，并采取有效措施防止泄密进一步
扩大。
2.本人不得在私人交往或通信中泄露公司机密，不得在公共场合谈论公司机密，
不得通过其他方式向第三方传递公司机密信息。
3.本人在职期间不得通过任何形式，泄露阿里巴巴相关数据、信息等机密。
4.本人不得与公司人事部门以外的第三方讨论、传播、散布、比对薪资。
5.无论本人以何种形式离职或被公司辞退，双方解除或终止劳动合同后，本人
仍然不得向其在公司任职期间接触、知悉的属于公司就职人员及其有关亲朋好
友披露自己曾在公司就职的公司经营策略、机密文件内容及工作待遇情况。
6.本人必须严格遵守公司的保密制度，防止泄露公司的商业秘密。
7.本人承诺在公司任职期间，不从事第二职业。特别是未经公司书面同意，不
得在与公司经营同类产品或提供同类服务的其他企业内任职，包括但不限于合
伙人、董事、监事、股东、经理、职员、代理人、顾问等；不得间接为上述企
业提供服务。
			
<b>三、违约责任</b>
1.本人若违反协议，造成公司重大经济损失，应赔偿公司所受全部损失，违约
罚款不足以赔偿公司所受的损失，本人当以公司实际损失额进行赔偿，包括但
不限于，实际可计算的损失、潜在的损失； 
2.在劳动合同期限内，本人违反本协议约定或有关法律规定，公司按本人自动
离职处理，或者视情况给予降薪、降职甚至作出开除的处分决定；
3.以上违约责任的执行，超过法律、法规赋予双方权限的，申请仲裁机构仲裁
或向法院提出告诉；双方协商不成，任何一方有权申请仲裁机构仲裁或向法院
提出告诉。
			
<b>四、本人自愿声明</b> 
本保密条款完全出于本人的真实意图表达，并声明自愿遵守，履行保密义务。
</pre>
      </div>
      <!-- 安全公约 -->
      <div title="安全公约" width="35%" style="color: #606266;">
        <div style="text-align: center; font-size: 20px; font-weight: 1000;">
          安全公约
        </div>
        <pre style="margin-left: -10px;">
<b>一、目的</b>
安全防控是目前集团和各位员工向前发展的重要核心，固为加强集团和各位员工
的安全与防控意识，为能更好的完善公司的经营与管理体系，根据国家有关法律、
法规及公司章程的规定，特制订本集团《安全公约》。

<b>二、公约细则
自觉遵守渠道制度、公司制度、保密协议和安全内控制度，强化自律、
自控，维护公司利益，做到不犯法，不违规，不触碰风控高压线。</b>

1.严格履行保密义务，严格执行保密义务，做到不透露CRM系统账号、不泄露公
司商业数据，不倒卖公司资源，不传播公司负面。
2.严格遵守公司管理制度，做到签单不跨区，录入不撞单，拒绝黑名单客户，单
子不买卖。
3.诚实到单，销售在获得业绩时，不得虚假业绩，不得弄虚假客户信息，不得用
不正当手段获取其他虚假业绩。
4.诚实报单，经理总监在上报业绩时，不得谎报业绩，不得恶意获取公司激励。
5.文明使用工作系统，不利用任何软件、程序对CRM系统进行操作。
6.摆正心态，不受利益影响，做到杜绝任何形式的回扣。
7.具备专业的服务态度，耐心对待客户，定要做到不辱骂，不嘲笑，尊重客户。
			
<b>三、认真学习和掌握各种安全操作及有关品控方面的知识，积极参加各种
品控培训，努力提高安全意识，自觉遵守安全作业的各项制度。
			
四、如违反上述公约，我自愿接受公司制度规定的处罚。</b>
</pre>
      </div>
      <h2 style="text-align: center; color: #409EFF;">风控管理--信息采集</h2>
      <el-form
        :model="ruleForm"
        :rules="rules"
        status-icon
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="ruleForm.name"
            maxlength="4"
            placeholder="请输入您的姓名"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="身份证" prop="IDs">
          <el-input v-model="ruleForm.IDs" placeholder="请输入您的身份证号">
          </el-input>
        </el-form-item>

        <el-form-item label="住址" prop="Site">
          <el-input
            type="textarea"
            v-model="ruleForm.Site"
            placeholder="请输入您的住址"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="入职时间" prop="date1">
          <el-date-picker
            clearable
            placeholder="选择日期"
            v-model="ruleForm.date1"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="部门及职位" prop="position">
          <el-cascader
            placeholder="请选择部门、职位"
            clearable
            v-model="ruleForm.position"
            :options="options"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>

        <el-form-item label="手机号">
          <el-row>
            <el-col :span="12">
              <el-form-item prop="Phone">
                <el-input
                  v-model="ruleForm.Phone"
                  clearable
                  placeholder="请输入您的手机号"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col class="line" :span="1">-</el-col> -->
            <el-col :span="11" :offset="1">
              <el-button
                type="button"
                @click="sendcode"
                :disabled="disabled"
                v-if="disabled == false"
                >发送验证码
              </el-button>
              <el-button
                type="button"
                @click="sendcode"
                :disabled="disabled"
                v-if="disabled == true"
                >{{ btntxt }}
              </el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top: 20px;">
            <el-col :span="8">
              <el-form-item prop="sendcode">
                <el-input
                  v-model="ruleForm.sendcode"
                  v-if="BoxShow == true"
                  placeholder="请输入验证码"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>

        <!-- 用户协议，保密协议 -->
        <el-form-item prop="Protocol">
          <el-checkbox v-model="ruleForm.Protocol" name="type"
            >同意所有协议
          </el-checkbox>
          <el-button type="text" @click="centerDialogVisible = true"
            >《保密协议》</el-button
          >

          <el-dialog
            title="保密声明"
            :visible.sync="centerDialogVisible"
            width="35%"
            center
          >
            <pre style="margin-left: 50px;">
根据《中华人民共和国反不正当竞争法》法律、法规规定，鉴于本人受聘于公司，
本人在职期间有从公司获得公司经营策略秘密和客户资料秘密的机会，有获得及
增进知识、经验、技能的机会；公司给本人的劳动支付了工资、奖金、提成、奖
励等报酬；本人明白泄露公司经营策略秘密、客户资料秘密会对公司造成极大损
害。为保护公司的经营策略秘密、客户资料秘密，维护公司及本人共同的长远利
益，本人自愿声明如下：
<p style="color:red;"><strong>公司作为与阿里巴巴合作的渠道商，以下保密内容及义务，统统包括
与阿里巴巴相关的需要保密的策略、信息、方案、数据等机密。</strong></p>
<b>一、保密内容</b>
1.公司尚未公开的发展规划、方针政策、经营决策的信息、计划、方案；
2.公司的经营方法、状况和经营实力；
3.公司机构的设置、编制、人员名册和统计表、奖惩材料、考核材料；
4.公司各级员工的个人薪金收入情况；
5.公司具有保密级别的文件、资料、会议记录、信件、方案、图片；
6.公司客户的资料及财产；

<b>二、保密义务</b>
1.本人必须严格遵守公司规定的任何成文或者不成文的保密文件、规章、制度等，
不得以任何形式将公司的任何机密泄露给公司以外的任何其他人。知悉公司机密
泄露情况者，应及时向公司人事部负责人报告，并采取有效措施防止泄密进一步
扩大。
2.本人不得在私人交往或通信中泄露公司机密，不得在公共场合谈论公司机密，
不得通过其他方式向第三方传递公司机密信息。
3.本人在职期间不得通过任何形式，泄露阿里巴巴相关数据、信息等机密。
4.本人不得与公司人事部门以外的第三方讨论、传播、散布、比对薪资。
5.无论本人以何种形式离职或被公司辞退，双方解除或终止劳动合同后，本人
仍然不得向其在公司任职期间接触、知悉的属于公司就职人员及其有关亲朋好
友披露自己曾在公司就职的公司经营策略、机密文件内容及工作待遇情况。
6.本人必须严格遵守公司的保密制度，防止泄露公司的商业秘密。
7.本人承诺在公司任职期间，不从事第二职业。特别是未经公司书面同意，不
得在与公司经营同类产品或提供同类服务的其他企业内任职，包括但不限于合
伙人、董事、监事、股东、经理、职员、代理人、顾问等；不得间接为上述企
业提供服务。

<b>三、违约责任</b>
1.本人若违反协议，造成公司重大经济损失，应赔偿公司所受全部损失，违约
罚款不足以赔偿公司所受的损失，本人当以公司实际损失额进行赔偿，包括但
不限于，实际可计算的损失、潜在的损失； 
2.在劳动合同期限内，本人违反本协议约定或有关法律规定，公司按本人自动
离职处理，或者视情况给予降薪、降职甚至作出开除的处分决定；
3.以上违约责任的执行，超过法律、法规赋予双方权限的，申请仲裁机构仲裁
或向法院提出告诉；双方协商不成，任何一方有权申请仲裁机构仲裁或向法院
提出告诉。

<b>四、本人自愿声明</b> 
本保密条款完全出于本人的真实意图表达，并声明自愿遵守，履行保密义务。
</pre>
            <span slot="footer" class="dialog-footer">
              <el-button @click="checkDialog((centerDialogRule1 = false))"
                >不同意</el-button
              >
              <el-button
                type="primary"
                @click="checkDialog((centerDialogRule1 = true))"
                >我同意</el-button
              >
            </span>
          </el-dialog>

          <!-- 协议二：安全协议 -->
          <el-button type="text" @click="centerDialogVisible2 = true"
            >《安全公约》</el-button
          >

          <el-dialog
            title="安全公约"
            :visible.sync="centerDialogVisible2"
            width="35%"
            center
          >
            <pre style="margin-left: 50px;">
<b>一、目的</b>
安全防控是目前集团和各位员工向前发展的重要核心，固为加强集团和各位员工
的安全与防控意识，为能更好的完善公司的经营与管理体系，根据国家有关法律、
法规及公司章程的规定，特制订本集团《安全公约》。

<b>二、公约细则
自觉遵守渠道制度、公司制度、保密协议和安全内控制度，强化自律、自控，维
护公司利益，做到不犯法，不违规，不触碰风控高压线。</b>
1.严格履行保密义务，严格执行保密义务，做到不透露CRM系统账号、不泄露公
司商业数据，不倒卖公司资源，不传播公司负面。
2.严格遵守公司管理制度，做到签单不跨区，录入不撞单，拒绝黑名单客户，单
子不买卖。
3.诚实到单，销售在获得业绩时，不得虚假业绩，不得弄虚假客户信息，不得用
不正当手段获取其他虚假业绩。
4.诚实报单，经理总监在上报业绩时，不得谎报业绩，不得恶意获取公司激励。
5.文明使用工作系统，不利用任何软件、程序对CRM系统进行操作。
6.摆正心态，不受利益影响，做到杜绝任何形式的回扣。
7.具备专业的服务态度，耐心对待客户，定要做到不辱骂，不嘲笑，尊重客户。

<b>三、认真学习和掌握各种安全操作及有关品控方面的知识，积极参加各种品控培
训，努力提高安全意识，自觉遵守安全作业的各项制度。

四、如违反上述公约，我自愿接受公司制度规定的处罚。</b>
						</pre>

            <span slot="footer" class="dialog-footer">
              <el-button @click="checkDialog((centerDialogRule2 = false))"
                >不同意</el-button
              >
              <el-button
                type="primary"
                @click="checkDialog((centerDialogRule2 = true))"
                >我同意</el-button
              >
            </span>
          </el-dialog>
        </el-form-item>

        <el-form-item style="margin-left: 40px;">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import opt_data from "../data/options.json";
export default {
  data() {
    let validatorName = (rule, value, callback) => {
      let _rule = /^[\u4e00-\u9fa5]{2,4}$/; // 2~4 个中文字
      if (!_rule.test(value)) {
        callback(new Error("请输入正确的姓名"));
      } else {
        callback();
      }
    };
    let validatorIDs = (rule, value, callback) => {
      // 身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X
      let _rule = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (!_rule.test(value)) {
        callback(new Error("请输入正确的身份证号"));
      } else {
        callback();
      }
    };
    let validatorPhone = (rule, value, callback) => {
      // 手机号判断、短信验证、身份证验证
      let _rule = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
      if (!_rule.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        name: "",
        IDs: "",
        Site: "",
        date1: "",
        position: [], // 级联选择值
        Phone: "",
        sendcode: "", // 输入框验证码
        Protocol: false, // 协议
      },
      // 部门级联选择
      options: opt_data, //引入本地json文件
      rules: {
        name: [
          {
            required: true, // 是否必须
            message: "请填写姓名", // 提示信息
            trigger: "blur", // 触发
          },
          {
            validator: validatorName,
            trigger: "blur",
          },
        ],
        IDs: [
          {
            required: true,
            message: "请选择活动区域",
            trigger: "change",
          },
          {
            validator: validatorIDs,
            trigger: "blur",
          },
        ],
        Site: [
          {
            required: true,
            message: "请输入地址",
            trigger: "change",
          },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        position: [
          {
            // type: "date",
            required: true,
            message: "请选择部门、职位",
            trigger: "change",
          },
        ],
        Phone: [
          {
            required: true,
            message: "请输入号码",
            trigger: "change",
          },
          {
            validator: validatorPhone,
            trigger: "blur",
          },
        ],
      },
      disabled: false,
      time: 0,
      btntxt: "重新发送",
      BoxShow: true, // 验证码框显示、隐藏
      centerDialogVisible: false, // 对话框显隐
      centerDialogVisible2: false, // 对话框2
      centerDialogRule1: false, // 存储协议1状态
      centerDialogRule2: false, // 存储协议2状态
    };
  },
  methods: {
    //手机验证发送验证码,并进行验证
    sendcode() {
      this.BoxShow = true;
      if (this.ruleForm.Phone == "") {
        this.$message({
          message: "手机号不能为空",
          center: true,
        });
        return;
      } else {
        console.log(this.ruleForm.Phone);
        let SMS = this.axios.create({
          baseURL: "https://albeibei.cn/rm/v1/send",
          setTimeout: 1500,
        });
        let tel = this.ruleForm.Phone; // 手机号
        let id_card = this.ruleForm.IDs; // 身份证

        SMS({
          method: "post",
          url: "/code",
          data: {
            tel,
            id_card,
          },
        })
          .then(() => {
            this.$message({
              message: "发送成功",
              type: "success",
              center: true,
            });
          })
          .catch((err) => {
            let errs = err.response.data.error;
            this.$message({
              message: errs,
              type: "success",
              center: true,
            });
          });

        this.time = 60;
        this.disabled = true;
        this.timer();
      }
    },
    //60S倒计时
    timer() {
      if (this.time > 0) {
        this.time--;
        this.btntxt = this.time + "s后重新获取";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btntxt = "获取验证码";
        this.disabled = false;
      }
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid && this.ruleForm.Protocol == true) {
          let tel = this.ruleForm.Phone;
          let address = this.ruleForm.Site;
          // 时间格式处理
          var GmtDate = this.ruleForm.date1;
          let year = GmtDate.getFullYear();
          let month = GmtDate.getMonth() + 1; // js 从0开始
          let Days = GmtDate.getDate();
          if (month < 10) {
            month = "0" + month;
          }
          if (Days < 10) {
            Days = "0" + Days;
          }
          let work_time = year + "-" + month + "-" + Days;
          let code = this.ruleForm.sendcode;
          let formValue = this.axios.create({
            baseURL: "https://albeibei.cn/rm/v1/",
            timeout: 1500,
          });
          formValue({
            method: "post",
            url: "register",
            data: {
              name: this.ruleForm.name,
              id_card: this.ruleForm.IDs,
              tel,
              address,
              work_time,
              code,
              department: this.ruleForm.position[1],
              position: this.ruleForm.position[2],
            },
          })
            .then(() => {
              let Re_data = this.ruleForm;
              Re_data.date1 = work_time;
              this.$router.push({
                path: "/Registered",
                query: { Re_data: Re_data },
              });
              this.$message({
                message: "信息提交成功",
                type: "success",
                showClose: true,
                duration: 0,
                center: true,
              });
            })
            .catch((err) => {
              // console.log("错误", err.response.data.error);
              this.$message({
                message: err.response.data.error,
                showClose: true,
                duration: 0,
                type: "error",
                center: true,
              });
            });
        } else {
          this.$message({
            message: "请勾选协议,并同意协议",
            type: "warning",
            showClose: true,
            duration: 0,
            center: true,
          });
          return false;
        }
      });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 双层协议验证
    checkDialog() {
      this.centerDialogVisible = false;
      this.centerDialogVisible2 = false;
      if (this.ruleForm.Protocol == false) {
        if (this.centerDialogRule1 == true && this.centerDialogRule2 == true) {
          this.ruleForm.Protocol = true;
        } else {
          if (this.centerDialogRule1 == false) {
            console.log("请查看并同意《保密协议》");
          }
          if (this.centerDialogRule2 == false) {
            console.log("请查看并同意《安全公约》");
          }
        }
      }
    },
    // 职位值
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

<style>
.box {
  width: 500px;
  margin: auto;
  margin-top: 10%;
  border: 1px solid #e4e7ed;
  padding: 50px 100px 100px 100px;
  background-color: #f2f6fc;
}
</style>
